<template>
    <div class="cartcontrol">
        <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart" transition="move">
            <span class="inner icon-remove_circle_outline"></span>
        </div>
        <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>
        
    </div>
</template>

<script type="text/ecmascript-6">
    import Vue from 'vue';
    export default{
        props:{
            food:{
                type:Object
            },
            menuCount:{
                type:Object
            }
        },
        data(){
            return {
                num:0
            }
        },
        methods:{
            addCart(event){
                if(!event._constructed){
                   return; 
                }
                if(!this.food.count){
                    console.log(this.food.count)
                    Vue.set(this.food,'count',1);
                }else{
                    this.food.count++;
                }
                /*if(!this.menuCount.count){
                    console.log(this.menuCount.count)              
                    Vue.set(this.menuCount,'count',1);
                }else{
                    this.menuCount.count++;
                }*/
                this.$dispatch('cart.add',event.target);
            },
            decreaseCart(event){
                if(!event._constructed){
                    return; 
                }
                if(this.food.count){
                    this.food.count--;
                }
                /*if(this.menuCount.count){                 
                    this.menuCount.count--;
                }*/
            }
        }
    };
</script>

<style rel="stylesheet/stylus" lang="stylus" >
    .cartcontrol
        font-size:0pX
        .cart-decrease
            display:inline-block
            padding:6px
            transition:all 0.4S linear
            &.move-transition
                opacity:1
                transform:translate3d(0,0,0)
                .inner
                    display:inline-block
                    line-height:24px
                    font-size:24px
                    color:rgb(0,160,220)
                    transition:all 0.4S linear
                    transform:rotate(0)
            &.move-enter,&.move-leave
                opacity:0
                transform:translate3d(24px,0,0)
                .inner
                    transform:rotate(180deg)
        .cart-count
            display:inline-block
            vertical-align:top
            width:12px
            padding-top:6px
            text-align:center
            line-height:24px
            font-size:10px
            color:rgb(147,153,159)
        .cart-add
            display:inline-block
            padding:6px
            line-height:24px
            font-size:24px
            color:rgb(0,160,220)
            
</style>